<template>
  <div class="DatePicker-demo" style="min-height:100px;width:100%;padding:10px;">
    <div>基本模式</div>
    <div style="display:flex;">
      <DatePicker
        :dateVal="[formDate.warnStartDate,formDate.warnEndDate]"
        @startChange="startChange"
        @endChange="endChange"
      >
      </DatePicker>
      <DatePicker
        style="margin-left:15px;"
        :startDate="formDate.warnStartDate"
        :endDate="formDate.warnEndDate"
        dispaysType="two"
        @startChange="startChange"
        @endChange="endChange"
      >
      </DatePicker>
    </div>
    <br>
    <br>
    <div>含时分秒：需要配置plusTime</div>
    <div style="display:flex;">
      <DatePicker
        plusTime
        :dateVal="[warnStartDate,warnEndDate]"
        @startChange="startChange1"
        @endChange="endChange2"
      >
      </DatePicker>
      <DatePicker
        plusTime
        style="margin-left:15px;"
        dispaysType="two"
        :startDate="warnStartDate"
        :endDate="warnEndDate"
        @startChange="startChange1"
        @endChange="endChange2"
      ></DatePicker>
    </div>
    <br>
    <br>

    <div>默认显示日期</div>
    <div style="display:flex;">
      <DatePicker
        :dateVal="[startDate,endDate]"
        @startChange="startChange3"
        @endChange="endChange4"
      >
      </DatePicker>
      <DatePicker
        style="margin-left:15px;"
        dispaysType="two"
        :startDate="startDate"
        :endDate="endDate"
        @startChange="startChange3"
        @endChange="endChange4"
      ></DatePicker>
    </div>
  </div>
</template>

<script>
  // import Winput from './components/input/src';
  // import WSelect from './components/select/src';
  // import WSearch from './components/search/src';
   import SimpleForm from './components/simple-form/src';
   import Wform from './components/form/src';
   import DatePicker from './components/date-picker/src';
    export default {
      name: "T",
      components:{
        // WSelect,
        // Winput,
        // WSearch
        SimpleForm,
        Wform,
        DatePicker
      },
      created() {
       this.startDate= this.dateFormatFilter(new Date((new Date().getTime() - 3600 * 1000 * 24 * 90)))
       this.endDate= this.dateFormatFilter(new Date())
      },
      mounted() {

      },
      computed:{
        /*计算属性传参 ☆☆☆☆☆*/

      },
      data () {
        return {
          formDate: {
            warnStartDate: '',
            warnEndDate: ''
          },
          warnStartDate: '',
          warnEndDate: '',
          startDate:"",
          endDate: ""
        }
      },
      // 方法
      filters:{

      },
      methods: {
        /**
         * 日期格式过滤器 13位时间戳转日期格式 YYYY-MM-DD
         * @param {String} time
         */
        dateFormatFilter(time){
          let date = new Date(time)
          const year = date.getFullYear()
          let month = date.getMonth() + 1
          let day = date.getDate()
          month = month < 10 ? '0' + month : month
          day = day < 10 ? '0' + day : day
          date = year + '-' + month + '-' + day
          return date
        },

        // 开始时间
        startChange (val) {
          console.log('开始时间', val)
          this.formDate.warnStartDate = val
        },
        // 结束时间
        endChange (val) {
          console.log('结束时间', val)
          this.formDate.warnEndDate = val
        },


        // 开始时间
        startChange1 (val) {
          console.log('开始时间', val)
          this.warnStartDate = val
        },
        // 结束时间
        endChange2 (val) {
          console.log('结束时间', val)
          this.warnEndDate = val
        },
        // 开始时间
        startChange3 (val) {
          console.log('开始时间', val)
          this.startDate = val
        },
        // 结束时间
        endChange4 (val) {
          console.log('结束时间', val)
          this.endDate = val
        }
      },
      watch:{

      },
      beforeDestroy() {

      }

    }
</script>

<style scoped lang="scss">

</style>



